// 热搜管理
<template>
  <div class="carousel_index">
    <div class="carousel_home">
      <!-- 表头 -->
      <p class="carousel_header">
        <span class="car_text">热搜标题</span>
        <input
          type="text"
          class="car_select"
          placeholder="热搜标题"
          v-model="SerchTitle"
        />
        <span class="car_text">热搜内容</span>
        <input
          type="text"
          class="car_select"
          placeholder="热搜内容"
          v-model="SerchContent"
        />
        <span class="car_text">启用状态</span>
        <select
          name=""
          id=""
          aria-placeholder="状态"
          class="car_select"
          v-model="SerchStatus"
        >
          <option value="0">未启用</option>
          <option value="1">启用</option>
        </select>
        <el-button type="primary" :size="size" @click="onSerch()"
          ><svg
            class="pd"
            t="1668948707527"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1430"
            width="16"
            height="16"
          >
            <path
              d="M474.9 880.6C249.5 880.6 66.2 697.3 66.2 472S249.5 63.4 474.8 63.4 883.5 246.7 883.5 472 700.2 880.6 474.9 880.6z m0-776.1c-202.6 0-367.5 164.8-367.5 367.5 0 202.6 164.8 367.5 367.5 367.5S842.3 674.6 842.3 472 677.5 104.5 474.9 104.5z"
              fill="#fff"
              p-id="1431"
            ></path>
            <path
              d="M937.7 960.2c-5.3 0-10.5-2-14.6-6L733.1 764c-8-8-8-21.1 0-29.1s21.1-8 29.1 0L952.3 925c8 8 8 21.1 0 29.1-4 4.1-9.3 6.1-14.6 6.1z"
              fill="#fff"
              p-id="1432"
            ></path>
          </svg>
          <span>搜索</span>
        </el-button>
        <el-button type="" :size="size"
          ><svg
            t="1668948938318"
            class="pd"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2569"
            width="16"
            height="16"
          >
            <path
              d="M928.16 144H736V64a32 32 0 0 0-32-32H320a32 32 0 0 0-32 32v80H95.84a32 32 0 0 0 0 64H129.6l77.92 698.656A96 96 0 0 0 302.912 992h418.144a96.032 96.032 0 0 0 95.424-85.344L894.4 208h33.728a32 32 0 0 0 0.032-64zM352 96h320v48H352V96z m400.896 803.552a32 32 0 0 1-31.808 28.448H302.912a32 32 0 0 1-31.808-28.448L193.984 208h636.032l-77.12 691.552z"
              p-id="2570"
            ></path>
            <path
              d="M608 820.928a32 32 0 0 0 32-32V319.104a32 32 0 0 0-64 0v469.824a32 32 0 0 0 32 32zM432 820.928a32 32 0 0 0 32-32V319.104a32 32 0 0 0-64 0v469.824a32 32 0 0 0 32 32z"
              p-id="2571"
            ></path></svg
          ><span @click="empty()">清空</span></el-button
        >
      </p>
      <!-- 表格 -->
      <avue-crud
        :data="data"
        :page="page"
        :option="option"
        class="carousel_table"
        @on-load="onLoad"
        @selection-change="selectionChange"
      >
        <template #menu-left="{ size }">
          <el-button type="primary" :size="size" @click="maskadd()"
            >+ 新增</el-button
          >
          <el-button type="danger" :size="size" @click="all_del()"
            >批量删除</el-button
          >
        </template>
        <template #menu="{ row, index, size }">
          <el-button
            type="primary"
            :size="size"
            icon="el-icon-edit"
            @click="onedit(row, index)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            :size="size"
            icon="el-icon-delete"
            @click="ondel(row, index)"
            >删除</el-button
          >
        </template>
      </avue-crud>
      <!-- 删除弹框 -->
      <el-dialog v-model="dialogVisible1" title="提示" width="30%">
        <span>
          <svg
            t="1669016375916"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2406"
            width="16"
            height="16"
          >
            <path
              d="M512 56.888889C261.688889 56.888889 56.888889 261.688889 56.888889 512s204.8 455.111111 455.111111 455.111111 455.111111-204.8 455.111111-455.111111-204.8-455.111111-455.111111-455.111111m0 853.333333c-221.866667 0-398.222222-176.355556-398.222222-398.222222s176.355556-398.222222 398.222222-398.222222 398.222222 176.355556 398.222222 398.222222-176.355556 398.222222-398.222222 398.222222"
              fill="#e98f36"
              p-id="2407"
            ></path>
            <path
              d="M512 682.666667c-17.066667 0-28.444444 5.688889-39.822222 17.066666-11.377778 11.377778-17.066667 22.755556-17.066667 39.822223 0 17.066667 5.688889 28.444444 17.066667 39.822222 11.377778 11.377778 22.755556 17.066667 39.822222 17.066666 17.066667 0 28.444444-5.688889 39.822222-17.066666 11.377778-11.377778 17.066667-22.755556 17.066667-39.822222 0-17.066667-5.688889-28.444444-17.066667-39.822223-11.377778-11.377778-22.755556-17.066667-39.822222-17.066666z m-51.2-455.111111l17.066667 409.6h62.577777L563.2 227.555556H460.8z"
              fill="#e98f36"
              p-id="2408"
            ></path>
          </svg>
          <span class="ondel">确定进行删除操作？</span>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button
              @click="
                () => {
                  dialogVisible1 = false;
                }
              "
              >取消</el-button
            >
            <el-button type="primary" @click="del()"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 编辑弹框 -->
      <el-dialog
        v-model="dialogVisible"
        title="修改"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <p class="hgao">
            <span>标题</span
            ><input type="text" class="inp" v-model="eidttitle" />
          </p>
          <p class="hgao">
            <span>内容</span
            ><input type="text" class="inp" v-model="eidtcontent" />
          </p>
          <p>
            <span class="px">排序</span
            ><select name="" id="" class="paixukuang" v-model="eidtpaixuhao">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
          </p>
          <p class="xuanz">
            <span class="zhuangtai"> 状态 </span>
            <avue-radio
              class="bianh"
              v-model="eidtstatus"
              :dic="dic"
            ></avue-radio>
          </p>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="editHot()"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 新增弹框 -->
      <el-dialog v-model="dialogVisibleadd" title="新增" width="30%">
        <div>
          <p class="hgao">
            <span>标题</span
            ><input type="text" class="inp" v-model="Addtitle" />
          </p>
          <p class="hgao">
            <span>内容</span
            ><input type="text" class="inp" v-model="Addcontent" />
          </p>
          <p>
            <span class="px">排序</span
            ><select name="" id="" class="paixukuang" v-model="Addpaixuhao">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
          </p>
          <p class="xuanz">
            <span class="zhuangtai"> 状态 </span>
            <avue-radio
              class="bianh"
              v-model="Addstatus"
              :dic="dic"
            ></avue-radio>
          </p>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisibleadd = false">取消</el-button>
            <el-button type="primary" @click="newList()"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 新增弹框 -->
      <el-dialog
        v-model="dialogVisibleadd"
        title="新增"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <p class="hgao">
            <span>标题</span
            ><input type="text" class="inp" v-model="Addtitle" />
          </p>
          <p class="hgao">
            <span>内容</span
            ><input type="text" class="inp" v-model="Addcontent" />
          </p>
          <p>
            <span class="px">排序</span
            ><select name="" id="" class="paixukuang" v-model="Addpaixuhao">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
          </p>
          <p class="xuanz">
            <span class="zhuangtai"> 状态 </span>
            <avue-radio
              class="bianh"
              v-model="Addstatus"
              :dic="dic"
            ></avue-radio>
          </p>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisibleadd = false">取消</el-button>
            <el-button type="primary" @click="newList()"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import "./index.css";
import request from "../../../../utils/request";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      del_all: [],
      page: {
        pageSize: 10,
      },
      num: 1,
      delobj: {},
      editId: "", //编辑id
      SerchStatus: 0, //搜索状态
      SerchContent: "", //搜索内容
      SerchTitle: "", //搜索标题
      eidttitle: "", //修改标题
      eidtcontent: "", //修改内容
      eidtpaixuhao: "", //修改排序号
      eidtstatus: 0, //修改状态
      Addtitle: "", //新增标题
      Addcontent: "", //新增内容
      Addpaixuhao: "", //新增排序号
      Addstatus: 0, //新增状态
      listLength: 0, //数据长度
      dialogVisible1: false,
      dialogVisible: false,
      dialogVisibleadd: false,
      data: [],
      dic: [
        {
          label: "正常",
          value: 1,
        },
        {
          label: "下线",
          value: 0,
        },
      ],
      option: {
        selection: true,
        align: "center",
        menuAlign: "center",
        border: true,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        layout: { total: "ho" },
        column: [
          {
            label: "热搜标题",
            prop: "title",
          },
          {
            label: "热搜内容",
            prop: "content",
          },
          {
            label: "录入时间",
            prop: "recDate",
          },
          {
            label: "顺序",
            prop: "seq",
          },
          {
            label: "启用状态",
            html: true,
            formatter: (val) => {
              return val.status == 1
                ? '<span class="status1">启用</span>'
                : "<span class='status2'>未启用</span>";
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },

  methods: {
    // 点击新增按钮
    maskadd() {
      this.dialogVisibleadd = true;
      this.Addtitle = "";
      this.Addcontent = "";
      this.Addpaixuhao = "";
      this.Addstatus = 0;
    },
    //点击批量删除
    async all_del() {
      await request.delete(
        `https://yami-admin-api.yiluxdeng.com/admin/hotSearch`,
        { data: this.del_all }
      );
      this.getList();
    },
    // 点击多选框
    selectionChange(list) {
      this.del_all = [];
      list.forEach((item) => {
        this.del_all.push(item.hotSearchId);
      });
    },
    //点击分页
    toggleSelection(val) {
      this.$refs.crud.toggleSelection(val);
    },
    //模拟分页
    onLoad(page) {
      let LENGTH = localStorage.getItem("hotLength");
      this.page.total = Number(LENGTH);
      this.num = page.currentPage;
      this.getList();
    },
    // 点击删除显示弹框
    ondel(row, index) {
      this.dialogVisible1 = true;
      this.delobj = row;
    },
    //点击编辑显示弹框
    onedit(row, index) {
      this.dialogVisible = true;
      this.editId = row.hotSearchId;
      this.eidttitle = row.title;
      this.eidtcontent = row.content;
      this.eidtpaixuhao = row.seq;
      this.eidtstatus = row.status;
    },
    //获取数据
    async getList() {
      let res = await request.get(
        `admin/hotSearch/page?t=1669001307311&current=${this.num}&size=10`
      );
      this.data = res.data.records;
      this.listLength = res.data.total;
      localStorage.setItem("hotLength", res.data.total);
    },
    // 搜索数据
    async onSerch() {
      let res = await request.get(
        `admin/hotSearch/page?t=1669083993829&current=1&size=10&title=${this.SerchTitle}&content=${this.SerchContent}&status=${this.SerchStatus}`
      );
      this.data = res.data.records;
      this.listLength = res.data.records.length;
      localStorage.setItem("hotLength", this.listLength);
    },
    // 点击清空按钮
    empty() {
      this.SerchTitle = "";
      this.SerchContent = "";
      this.SerchStatus = 0;
    },
    //点击删除
    async del() {
      this.dialogVisible1 = false;
      let arr = [];
      arr.push(this.delobj.hotSearchId);
      await request.delete(`admin/hotSearch`, { data: arr });
      this.getList();
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    },
    //点击确认新增
    async newList() {
      let obj = {
        content: this.Addcontent,
        hotSearchId: new Date().getTime(),
        recDate: "",
        seq: this.Addpaixuhao,
        status: this.Addstatus,
        title: this.Addtitle,
        t: new Date().getTime(),
      };
      await request.post("/admin/hotSearch", obj);
      this.dialogVisibleadd = false;
      this.getList();
      ElMessage({
        message: "新增成功",
        type: "success",
      });
      window.onload;
    },
    //点击确认编辑
    async editHot() {
      let obj = {
        content: this.eidtcontent,
        hotSearchId: this.editId,
        recDate: "",
        seq: this.eidtpaixuhao,
        status: this.eidtstatus,
        title: this.eidttitle,
        t: new Date().getTime(),
      };
      await request.put("/admin/hotSearch", obj);
      this.getList();
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped>
@import url("./index.css");
</style>